<template>
  <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="`出差详情`" :autoBack="true" leftIconColor="$uni-text-color"
    :bgColor="'rgba(0,0,0,0)'" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">

    <view class="container"
      :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">

      <!-- 表单盒子 -->
      <view class="form_box area">
        <scroll-view scroll-y class="comprehensive" v-if="list"   :style="page ==  'approval' && level == userInfo.id && recyclestate== 0 || recyclestate== 3 ? 'height:73vh' : 'height:82vh'">
          <view class="recruit_wrap">
              <view class="header">
                <up-avatar :src="`${baseUrl}`+ list.user.avatar" shape="circle" size="60"></up-avatar>
                  <view class="header_cont">
                    <view class="title">{{list.user.nickname}}提交的申请</view>
                    <view class="times">{{ formatDatetime(list.createtime)}}<text class="hint">提交</text></view>
                  </view>
              </view>
              <view class="detial_list">
                <view class="item item_special">
                  <view class="titles">申请理由：</view>
                  <view class="item_special_cont">{{list.title}}</view>
                </view>
                <view class="item">
                  <view class="titles">交通工具：</view>
                  <view class="list_right">{{ list.vehicle_text }}</view>
                </view>
                <view class="item">
                  <view class="titles">单程往返：</view>
                  <view class="list_right">{{ list.type_text }}</view>
                </view>
                <view class="item">
                  <view class="titles">出发地：</view>
                  <view class="list_right">{{ list.start_place }}</view>
                </view>
                <view class="item">
                  <view class="titles">目的地：</view>
                  <view class="list_right">{{ list.end_place }}</view>
                </view>
                <view class="item">
                  <view class="titles">开始时间：</view>
                  <view class="list_right">{{ list.start_date }}</view>
                </view>
                <view class="item">
                  <view class="titles">结束时间：</view>
                  <view class="list_right">{{ list.end_date }}</view>
                </view>
                <view class="item">
                  <view class="titles">出差天数：</view>
                  <view class="list_right">{{ list.days }}</view>
                </view>
                <view class="item">
                  <view class="titles">出行人：</view>
                  <view class="list_right">{{ list.accompany_person_name }}</view>
                </view>
              </view>
              
           
              <!-- 流程图  当员工时候不显示，审核人是老板时候显示-->
            <s-review-state :stepList="stepList" :dates="dates"></s-review-state>
          </view>
          
        </scroll-view>
      </view>

    </view>

  </s-layout>
 <!-- 拒绝理由 -->
 <s-reasons-comfirm :show="showRefuse" 
            @cancel="reasonsCancel"
             @affirm="reasonsConfirm" ></s-reasons-comfirm>
  <!-- 底部提交按钮 -->
  <view v-if="page ==  'approval' ">
    <view v-if="level == userInfo.id">
      <view class="edit_button"  v-if="recyclestate== 0 || recyclestate== 3">
        <button class="del" @tap="refuse(list.id)">拒绝</button>
        <button class="edit" @tap="submit(list.id)">同意</button>
      </view>
    </view>
  </view>

</template>

<script setup>
import sheep from '@/sheep';
import { ref, reactive, unref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { baseUrl } from "@/sheep/config";
const { safeAreaInsets } = uni.getSystemInfoSync();
const userInfo = sheep.$store('user').userInfo;
import { isEmpty } from 'lodash';
import {
  formatDatetime
	} from '@/utils/fn.js';

const  editid = ref('')
const recyclestate = ref()
const level =  ref()
const page = ref()
const is_template = ref(0)
onLoad((options)=>{
  page.value = options.page
  editid.value = options.ids
  getBorrowingView()

  is_template.value = options.is_template

  if (!isEmpty(options.is_template)) {
    is_template.value = 1
  }

  
})
const stepList = ref([])
//请求数据
const list = ref()
const dates = ref(-1)
const images = ref([])
const getBorrowingView =  async() => {
  let params = {
		  ids:editid.value,
		}
 const res = await sheep.$api.evection.getEvectionView(params)
    list.value = res?.data
    level.value = res.data.level
    recyclestate.value = res.data.state
    images.value =  res.data.images?.split(',');
    stepList.value = res?.data.approval_process
    stepList.value.forEach((i)=>{
        if(i.datetime){
          dates.value++
        }
    })
}
//同意
const submit = async (e) => {
  uni.$u.throttle(() => {
    // #ifdef MP
    sheep.$platform.useProvider('wechat').subscribeMessage('apply_notice');
    // #endif
  let params = {
    ids:e,
    state:3
  }
  sheep.$api.evection.getEvectionApprovePass(params).then((res) => {
    sheep.$helper.toast(res.msg);
    setTimeout(function() {
      stepList.value = []
      list.value =''
      dates.value = -1
      getBorrowingView()
      if(is_template.value != 1) {
        sheep.$router.renewal()
      }
      }, 1000);
  	});
  }, 1000);
};


// 拒绝
const showRefuse =  ref(false)
const reasonsValue =  ref()
const reasonsId = ref()
const refuse =(e)=>{
  showRefuse.value = true
  reasonsId.value = e
}
//拒绝理由 确定 -->
const reasonsConfirm = (e)=>{
  uni.$u.throttle(() => {
  // #ifdef MP
  sheep.$platform.useProvider('wechat').subscribeMessage('apply_result_notice');
  // #endif
  reasonsValue.value = e
  if(!reasonsValue.value){
    sheep.$helper.toast('请输入拒绝理由');
      return;
  }else{
 let params = {
    ids:reasonsId.value,
    reasons:reasonsValue.value
  }
  sheep.$api.evection.getEvectionApproveRefuse(params).then((res) => {
    sheep.$helper.toast(res.msg);
    setTimeout(function() {
      stepList.value = []
      list.value =''
      dates.value = -1
      getBorrowingView()
      showRefuse.value = false
      if(is_template.value != 1) {
        sheep.$router.renewal()
      }
      }, 1000);
  	});
  }
}, 1000);
}


// 拒绝理由取消
const reasonsCancel = (e)=>{
  showRefuse.value = e
  reasonsValue.value = ''
}
</script>

<style scoped lang="scss">
 @import '../compentns/public.scss';
 
 .recruit_wrap{
  .header{
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #EFEFEF;
    padding-bottom: 30rpx;
    margin-bottom: 20rpx;
      image{
        width: 104rpx;
        height: 104rpx;
        border-radius: 50%;
      }
      .header_cont{
        display: flex;
        flex-direction: column;
        margin-left: 20rpx;
      }
      .title{
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 30rpx;
        margin-bottom: 10rpx;
      }
      .times{
        font-family: PingFangSC;
        color: #999999;
        font-weight: 500;
        font-size: $uni-font-size-sm;
      }
    }
    .detial_list{
      width: 100%;
      margin-bottom: 30rpx;
      .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 90rpx;
        .titles {
          font-family: PingFangSC;
          color: #666666;
          font-weight: 500;
         font-size:$uni-font-size-26;
        }
        .list_right{
          font-family: PingFangSC;
          color: $uni-text-color;
          font-weight: 500;
         font-size:$uni-font-size-26;
          text-align: right;
        }
      }
      .item_special{
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        .titles {
          font-family: PingFangSC;
          color: #666666;
          font-weight: 500;
         font-size:$uni-font-size-26;
          height: 90rpx;
          line-height: 90rpx;
        }
        .item_special_cont{
          width: calc(100% - 40rpx);
          background: #F9FAFF;
          border-radius: 16rpx;
          color: $uni-text-color;
          font-weight: 500;
         font-size:$uni-font-size-26;
          padding: 20rpx;
        }
        .item_special_img{
          display: flex;
          image{
            width:118rpx ;
            height: 118rpx;
            border-radius: 16rpx;
            background-color: #F4F6FA;
            margin-left: 10rpx;
          }
        }
      }
    }
 }
//审核流程
.auditProcess{
  border-top: 1rpx solid #EFEFEF;
  .title{
    height: 90rpx;
    line-height: 90rpx;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
    position: relative;
    margin-bottom: 20rpx;
    &::after{
      width: 92rpx;
      height: 14rpx;
      content: '';
      position: absolute;
      bottom: 23%;
      z-index: 9;
      left: 3%;
      border-radius: 10rpx;
      background-color: rgba(0, 56, 247, 0.5);
    }
    }
      .status {
        display: flex;
        justify-content: space-between;
        min-height: 140rpx;
        padding-left: 20rpx;
        .status_left{
          width: 70%;
          margin-left: 20rpx;
          .name{
            color: $uni-text-color;
            font-weight: 500;
           font-size:$uni-font-size-26;
            
            .position{
              color: #999999;
              font-weight: 500;
              font-size: 22rpx;
              margin-left: 10rpx;
            }
          }
          .date{
            font-family: PingFangSC;
            color: #999999;
            font-weight: 500;
            font-size: $uni-font-size-sm;
            margin-top: 10rpx;
          }
        }
        .status_right{
          .taster{
            border: none;
            width: 104rpx;
            height: 40rpx;
            font-family: PingFangSC;
            font-weight: 500;
            font-size: 22rpx;
            border-radius: 18rpx;
            line-height: 40rpx;
            padding: 0;
            &::after{
              border: none;
            }
          }
          .yellow{
            color: #F77704;
            background: #FEF3E6;
          }
          .green{
            color: #17A500;
            background: #EAFEE6;
          }
          .red{
            color: #FEE6E6;
            background: #FF0000;
          }
        }
      }
}
//  修改内容
.edit_button{
    height: 144rpx;
    width: 90%;
    padding: 0 5%;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 98;
    display: flex;
    align-items: center;
    .del{width: 316rpx;
      height: 90rpx;
      border-radius: 50rpx;
      border: 2rpx solid $uni-color-primary;
      color: $uni-color-primary;
      font-family: PingFangSC;
      color: $uni-color-primary;
      font-weight: $uni-font-weight;
      font-size: 34rpx;}
    .edit{
      margin-left: 20rpx;
      width: 316rpx;
      height: 90rpx;
      border-radius: 50rpx;
      font-family: PingFangSC;
      color: #FFFFFF;
      font-weight: $uni-font-weight;
      font-size: 34rpx;
      background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
    }
}
// 滚动
.comprehensive{
  background-color: rgba(0, 0, 0, 0);
}
.reasonspop{
  :deep(.u-textarea){
      background-color:#F9FAFF;
      .u-textarea__field{
        height: 446rpx !important;
        padding: 10rpx;
      }
    }
  .reasonsTitle{
    height: 90rpx;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 40rpx;
  }
  .reasonsForRefusal{
    height: 466rpx;
    background: #F9FAFF;
  }
  .btn{
    height: 120rpx;
    background: $uni-bg-color;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .button{
      height: 90rpx;
      width: 240rpx;
      border-radius:50rpx;

      font-weight: $uni-font-weight;
      font-size: 34rpx;
    }
    .cancel{
     border: 1px solid $uni-color-primary;
     color: $uni-color-primary
    }
    .confirm{
      color: $uni-bg-color;
      background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
    }
   
  }
}
</style>